<script setup>
import { onMounted, ref } from 'vue'
import { Popup } from 'vant'
const showKefu = ref(false)
const showKefuModal = ref(false)
onMounted(() => {
  showKefu.value = true
})
const goKefu = () => {
  showKefuModal.value = true
}
</script>
<template>
  <div class="kefu-container">
    <div className="icon-kefu" @click="goKefu"></div>
    <Popup
      class="popup-d"
      v-model:show="showKefuModal"
      position="bottom"
      :style="{ height: '100%' }"
      closeable
      close-icon-position="top-right"
    >
      <p class="kefu-title">YiwuPay跨境业务在线咨询</p>
      <div style="width: 100%; height: 100%">
        <iframe
          style="height: 100%; width: 100%"
          src="https://cschat.antcloud.com.cn/index.htm?tntInstId=FONIMHCN&scene=SCE01231485"
        />
      </div>
    </Popup>
  </div>
</template>
<style lang="scss" scoped>
.popup-d {
  position: relative;
  width: 100%;
  .kefu-title {
    font-size: 0.16rem !important;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    text-align: center;
    padding: 12px 0;
    background: #fff;
    color: #222;
  }
}
.icon-kefu {
  display: block;
  height: 0.38rem;
  width: 0.28rem;
  // border-radius: 50%;
  position: fixed;
  top: 4rem;
  right: 0.08rem;
  background-image: url('./assets/img/kefu.png');
  cursor: pointer;
  background-size: cover;
  z-index: 998;
}
</style>
